<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏管理 - Steam后台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        /* 样式部分保持不变，仅调整状态标签的视觉样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        :root {
            --primary-bg: #1b2838;
            --secondary-bg: #2a475e;
            --sidebar-bg: #171a21;
            --card-bg: #16202d;
            --accent-blue: #66c0f4;
            --accent-green: #5c7e10;
            --accent-red: #e74c3c;
            --accent-yellow: #f1c40f;
            --text-primary: #c6d4df;
            --text-secondary: #8f98a0;
            --border-color: rgba(102, 192, 244, 0.2);
            --transition: all 0.3s ease;
        }

        body {
            background: linear-gradient(135deg, #1b2838 0%, #12202e 100%);
            color: var(--text-primary);
            min-height: 100vh;
            padding: 0;
            display: flex;
            flex-direction: column;
        }

        /* 顶部导航栏 */
        .top-nav {
            background: #171a21;
            padding: 15px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            display: flex;
            align-items: center;
            color: var(--accent-blue);
            font-size: 1.5rem;
            font-weight: 700;
        }

        .logo i {
            margin-right: 10px;
        }

        .user-menu {
            display: flex;
            align-items: center;
        }

        .user-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: var(--accent-blue);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 10px;
        }

        .user-name {
            font-weight: 600;
            margin-right: 15px;
        }

        .logout-btn {
            color: var(--text-secondary);
            transition: var(--transition);
        }

        .logout-btn:hover {
            color: var(--accent-blue);
            text-decoration: none;
        }

        /* 主内容区域 */
        .main-content {
            flex: 1;
            display: flex;
        }

        /* 侧边菜单 */
        .sidebar {
            width: 240px;
            background: #171a21;
            padding: 20px 0;
            height: calc(100vh - 66px);
            position: sticky;
            top: 66px;
            transition: var(--transition);
        }

        .sidebar-menu {
            list-style: none;
            padding: 0;
        }

        .sidebar-item {
            margin-bottom: 5px;
        }

        .sidebar-link {
            display: block;
            padding: 12px 20px;
            color: var(--text-secondary);
            text-decoration: none;
            transition: var(--transition);
            font-weight: 500;
            display: flex;
            align-items: center;
        }

        .sidebar-link i {
            width: 25px;
            margin-right: 10px;
            font-size: 1.1rem;
        }

        .sidebar-link:hover,
        .sidebar-link.active {
            background: rgba(102, 192, 244, 0.1);
            color: var(--accent-blue);
        }

        /* 内容容器 */
        .content-container {
            flex: 1;
            padding: 30px;
            overflow-x: hidden;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* 头部样式 */
        .admin-header {
            padding: 20px 0;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
        }

        .header-content {
            display: flex;
            align-items: center;
        }

        .admin-header h1 {
            font-size: 2.2rem;
            background: linear-gradient(to right, var(--accent-blue), #4a9bc9);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            margin-bottom: 0;
        }

        .admin-header h1 i {
            margin-right: 15px;
            font-size: 1.8rem;
        }

        /* 操作按钮区域 */
        .action-buttons {
            display: flex;
            gap: 15px;
            margin-top: 15px;
        }

        .action-btn {
            padding: 10px 20px;
            border-radius: 6px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }

        .action-btn i {
            margin-right: 8px;
        }

        .btn-add {
            background: linear-gradient(to right, var(--accent-green), #6fa018);
            color: white;
        }

        .btn-add:hover {
            background: linear-gradient(to right, #6fa018, #7eb31a);
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(92, 126, 16, 0.4);
        }

        .btn-active {
            background: rgba(46, 204, 113, 0.2);
            color: #2ecc71;
            border: 1px solid rgba(46, 204, 113, 0.4);
        }

        .btn-inactive {
            background: rgba(231, 76, 60, 0.2);
            color: #e74c3c;
            border: 1px solid rgba(231, 76, 60, 0.4);
        }

        .btn-filter {
            background: rgba(52, 152, 219, 0.2);
            color: var(--accent-blue);
            border: 1px solid rgba(52, 152, 219, 0.4);
        }

        .btn-active:hover, .btn-inactive:hover, .btn-filter:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        /* 筛选区域 */
        .filters-container {
            background: var(--card-bg);
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 30px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            border: 1px solid var(--border-color);
        }

        .filters-row {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .filter-group {
            flex: 1;
            min-width: 200px;
        }

        .filter-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--accent-blue);
        }

        .filter-select, .filter-input {
            width: 100%;
            padding: 10px 15px;
            background: rgba(22, 32, 45, 0.7);
            border: 1px solid var(--border-color);
            border-radius: 4px;
            color: var(--text-primary);
            font-size: 1rem;
        }

        /* 游戏列表 */
        .game-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 25px;
        }

        .game-card {
            background: var(--card-bg);
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
            border: 1px solid var(--border-color);
            transition: var(--transition);
            display: flex;
            flex-direction: column;
            height: 100%;
            position: relative;
        }

        .game-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
            border-color: rgba(102, 192, 244, 0.5);
        }

        .game-status {
            position: absolute;
            top: 15px;
            right: 15px;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 600;
            z-index: 2;
        }

        .status-active {
            background: rgba(46, 204, 113, 0.2);
            color: #2ecc71;
            border: 1px solid rgba(46, 204, 113, 0.4);
        }

        .status-inactive {
            background: rgba(231, 76, 60, 0.2);
            color: #e74c3c;
            border: 1px solid rgba(231, 76, 60, 0.4);
        }

        .status-pending {
            background: rgba(241, 196, 15, 0.2);
            color: #f1c40f;
            border: 1px solid rgba(241, 196, 15, 0.4);
        }

        .game-cover {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
        }

        .game-details {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .game-title {
            font-weight: 700;
            color: white;
            font-size: 1.4rem;
            margin-bottom: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .game-info {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
        }

        .info-label {
            min-width: 80px;
            color: var(--text-secondary);
            font-weight: 500;
        }

        .info-value {
            color: var(--text-primary);
            font-weight: 600;
        }

        .game-price {
            color: #a4d007;
            font-weight: 700;
            font-size: 1.4rem;
            margin: 15px 0;
            text-align: center;
        }

        .game-actions {
            display: flex;
            gap: 10px;
            margin-top: auto;
            padding-top: 15px;
            border-top: 1px solid var(--border-color);
        }

        .game-action-btn {
            flex: 1;
            padding: 8px 0;
            border-radius: 4px;
            border: none;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .game-action-btn i {
            margin-right: 5px;
        }

        .activate-btn {
            background: rgba(46, 204, 113, 0.15);
            color: #2ecc71;
            border: 1px solid rgba(46, 204, 113, 0.3);
        }

        .deactivate-btn {
            background: rgba(231, 76, 60, 0.15);
            color: #e74c3c;
            border: 1px solid rgba(231, 76, 60, 0.3);
        }

        .edit-btn {
            background: rgba(52, 152, 219, 0.15);
            color: var(--accent-blue);
            border: 1px solid rgba(52, 152, 219, 0.3);
        }

        .activate-btn:hover {
            background: rgba(46, 204, 113, 0.3);
        }

        .deactivate-btn:hover {
            background: rgba(231, 76, 60, 0.3);
        }

        .edit-btn:hover {
            background: rgba(52, 152, 219, 0.3);
        }

        /* 响应式调整 */
        @media (max-width: 1200px) {
            .sidebar {
                width: 70px;
            }

            .nav-title, .sidebar-link span {
                display: none;
            }

            .sidebar-link {
                justify-content: center;
                padding: 15px;
            }

            .sidebar-link i {
                margin-right: 0;
                font-size: 1.4rem;
            }
        }

        @media (max-width: 992px) {
            .admin-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .action-buttons {
                width: 100%;
                justify-content: center;
            }

            .filters-row {
                flex-direction: column;
            }
        }

        @media (max-width: 768px) {
            .top-nav {
                padding: 0 15px;
            }

            .content-container {
                padding: 15px;
            }

            .game-list {
                grid-template-columns: 1fr;
            }

            .admin-header h1 {
                font-size: 1.8rem;
            }

            .action-buttons {
                flex-direction: column;
            }

            .action-btn {
                width: 100%;
            }
        }

        @media (max-width: 576px) {
            .top-nav {
                flex-wrap: wrap;
                padding: 10px;
            }

            .logo {
                margin-bottom: 10px;
            }

            .user-name {
                display: none;
            }

            .filters-container {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
<!-- 顶部导航栏 -->
<div class="top-nav">
    <div class="logo">
        <i class="fas fa-gamepad"></i> Steam 管理后台
    </div>

    <div class="user-menu">
        <div class="user-avatar">
            <i class="fas fa-user"></i>
        </div>
        <span class="user-name">管理员</span>
        <a href="/login" class="logout-btn">
            <i class="fas fa-sign-out-alt"></i>
        </a>
    </div>
</div>

<!-- 主内容区域 -->
<div class="main-content">
    <!-- 侧边菜单 -->
    <div class="sidebar">
        <ul class="sidebar-menu">
            <li class="sidebar-item">
                <a href="#" class="sidebar-link active">
                    <i class="fas fa-gamepad"></i>
                    <span>游戏管理</span>
                </a>
            </li>
            <li class="sidebar-item">
                <a href="#" class="sidebar-link">
                    <i class="fas fa-shopping-cart"></i>
                    <span>订单管理</span>
                </a>
            </li>
            <li class="sidebar-item">
                <a href="#" class="sidebar-link">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
            </li>
            <li class="sidebar-item">
                <a href="#" class="sidebar-link">
                    <i class="fas fa-chart-line"></i>
                    <span>销售统计</span>
                </a>
            </li>
            <li class="sidebar-item">
                <a href="#" class="sidebar-link">
                    <i class="fas fa-cog"></i>
                    <span>系统设置</span>
                </a>
            </li>
        </ul>
    </div>

    <!-- 内容容器 -->
    <div class="content-container">
        <!-- 头部区域 -->
        <div class="admin-header">
            <div class="header-content">
                <h1><i class="fas fa-gamepad"></i> 游戏列表管理</h1>
            </div>

            <div class="action-buttons">
                <!-- 修改为链接 -->
                <a href="/admin/games/add" class="action-btn btn-add">
                    <i class="fas fa-plus"></i> 新增游戏
                </a>
                <button class="action-btn btn-active">
                    <i class="fas fa-arrow-up"></i> 批量上架
                </button>
                <button class="action-btn btn-inactive">
                    <i class="fas fa-arrow-down"></i> 批量下架
                </button>
                <button class="action-btn btn-filter">
                    <i class="fas fa-filter"></i> 筛选游戏
                </button>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="filters-container">
            <div class="filters-row">
                <div class="filter-group">
                    <label class="filter-label">游戏状态</label>
                    <select class="filter-select" id="statusFilter">
                        <option value="">所有状态</option>
                        <option value="在售中">在售中</option>
                        <option value="已下架">已下架</option>
                        <option value="即将发售">即将发售</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label class="filter-label">游戏类别</label>
                    <select class="filter-select">
                        <option value="">所有类别</option>
                        <option value="rpg">角色扮演</option>
                        <option value="fps">第一人称射击</option>
                        <option value="strategy">策略</option>
                        <option value="sports">体育</option>
                        <option value="adventure">冒险</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label class="filter-label">价格范围</label>
                    <select class="filter-select">
                        <option value="">所有价格</option>
                        <option value="0-50">¥0 - ¥50</option>
                        <option value="50-100">¥50 - ¥100</option>
                        <option value="100-200">¥100 - ¥200</option>
                        <option value="200+">¥200以上</option>
                    </select>
                </div>

                <div class="filter-group">
                    <label class="filter-label">搜索游戏</label>
                    <input type="text" class="filter-input" placeholder="输入游戏名称...">
                </div>
            </div>
        </div>

        <!-- 游戏列表 -->
        <div class="game-list" id="gameList">
            <!-- 动态生成游戏卡片 -->
            <div class="game-card" th:each="game : ${games}" th:data-id="${game.id}">
                <div class="game-status"
                     th:classappend="${game.status == '在售中' ? 'status-active' : (game.status == '已下架' ? 'status-inactive' : 'status-pending')}"
                     th:text="${game.status}">在售中</div>
                <img th:src="${game.imageUrl}" class="game-cover" th:alt="${game.name}">

                <div class="game-details">
                    <div class="game-title" th:text="${game.name}">游戏名称</div>

                    <div class="game-info">
                        <span class="info-label">类别:</span>
                        <span class="info-value" th:text="${game.type}">角色扮演</span>
                    </div>

                    <div class="game-info">
                        <span class="info-label">厂商:</span>
                        <span class="info-value" th:text="${game.producer}">厂商名称</span>
                    </div>

                    <div class="game-info">
                        <span class="info-label">发行日期:</span>
                        <span class="info-value" th:text="${#temporals.format(game.launchDate, 'yyyy-MM-dd')}">2023-01-01</span>
                    </div>

                    <div class="game-price" th:text="${'¥' + #numbers.formatDecimal(game.price, 1, 2)}">¥199.00</div>

                    <div class="game-actions">
                        <!-- 根据状态显示不同按钮 -->
                        <button th:if="${game.status == '在售中'}" class="game-action-btn deactivate-btn">
                            <i class="fas fa-ban"></i> 下架
                        </button>
                        <button th:if="${game.status == '已下架' or game.status == '即将发售'}" class="game-action-btn activate-btn">
                            <i class="fas fa-check-circle"></i> 上架
                        </button>
                        <button class="game-action-btn edit-btn">
                            <i class="fas fa-edit"></i> 编辑
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 卡片悬停效果
        const gameCards = document.querySelectorAll('.game-card');
        gameCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.borderColor = 'rgba(102, 192, 244, 0.5)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.borderColor = 'rgba(102, 192, 244, 0.2)';
            });
        });

        // 操作按钮功能
        const activateBtn = document.querySelector('.action-btn.btn-active');
        const deactivateBtn = document.querySelector('.action-btn.btn-inactive');
        const filterBtn = document.querySelector('.action-btn.btn-filter');

        // 新增游戏按钮现在是链接，不需要JavaScript处理

        activateBtn.addEventListener('click', function() {
            alert('批量上架选中的游戏...');
        });

        deactivateBtn.addEventListener('click', function() {
            alert('批量下架选中的游戏...');
        });

        filterBtn.addEventListener('click', function() {
            const filters = document.querySelector('.filters-container');
            if(filters.style.display === 'none') {
                filters.style.display = 'block';
            } else {
                filters.style.display = 'none';
            }
        });

        // 提交状态更新表单的辅助函数
        function submitStatusForm(gameId, status) {
            const form = document.createElement('form');
            form.action = `/admin/games/${gameId}/status`;
            form.method = 'post';
            form.style.display = 'none';

            const statusInput = document.createElement('input');
            statusInput.type = 'hidden';
            statusInput.name = 'status';
            statusInput.value = status;

            form.appendChild(statusInput);
            document.body.appendChild(form);
            form.submit();
            document.body.removeChild(form);
        }

        // 单个游戏操作按钮
        const activateBtns = document.querySelectorAll('.activate-btn');
        const deactivateBtns = document.querySelectorAll('.deactivate-btn');
        const editBtns = document.querySelectorAll('.edit-btn');

        // 为上架按钮添加事件监听
        activateBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const card = this.closest('.game-card');
                const gameId = card.getAttribute('data-id');
                if (gameId) {
                    submitStatusForm(gameId, '在售中');
                } else {
                    alert('未找到游戏ID，操作失败');
                }
            });
        });

        // 为下架按钮添加事件监听
        deactivateBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const card = this.closest('.game-card');
                const gameId = card.getAttribute('data-id');
                if (gameId) {
                    submitStatusForm(gameId, '已下架');
                } else {
                    alert('未找到游戏ID，操作失败');
                }
            });
        });

        // 为编辑按钮添加事件监听 - 跳转到编辑页面
        editBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const card = this.closest('.game-card');
                const gameId = card.getAttribute('data-id');
                if (gameId) {
                    window.location.href = `/admin/games/${gameId}/edit`;
                } else {
                    alert('未找到游戏ID，操作失败');
                }
            });
        });

        // 侧边栏导航
        const navLinks = document.querySelectorAll('.sidebar-link');
        navLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                navLinks.forEach(l => l.classList.remove('active'));
                this.classList.add('active');
            });
        });

        // 搜索功能
        const searchInput = document.querySelector('.filter-input');
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const gameCards = document.querySelectorAll('.game-card');

            gameCards.forEach(card => {
                const gameName = card.querySelector('.game-title').textContent.toLowerCase();
                if (gameName.includes(searchTerm)) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 状态筛选 - 修改后的版本
        const statusFilter = document.getElementById('statusFilter');
        statusFilter.addEventListener('change', function() {
            const selectedStatus = this.value;
            const gameCards = document.querySelectorAll('.game-card');

            // 遍历所有游戏卡片，根据状态筛选
            gameCards.forEach(card => {
                const statusElement = card.querySelector('.game-status');
                if (!statusElement) return;

                const cardStatus = statusElement.textContent.trim();

                // 如果选择"所有状态"或者卡片状态匹配，则显示
                if (!selectedStatus || cardStatus === selectedStatus) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    });

    // 初始化页面事件的函数
    function initPageEvents() {
        // 卡片悬停效果
        const gameCards = document.querySelectorAll('.game-card');
        gameCards.forEach(card => {
            card.addEventListener('mouseenter', function() {
                this.style.borderColor = 'rgba(102, 192, 244, 0.5)';
            });
            card.addEventListener('mouseleave', function() {
                this.style.borderColor = 'rgba(102, 192, 244, 0.2)';
            });
        });

        // 上架/下架按钮事件
        const activateBtns = document.querySelectorAll('.activate-btn');
        const deactivateBtns = document.querySelectorAll('.deactivate-btn');

        activateBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const card = this.closest('.game-card');
                const gameId = card.getAttribute('data-id');
                if (gameId) {
                    submitStatusForm(gameId, '在售中');
                } else {
                    alert('未找到游戏ID，操作失败');
                }
            });
        });

        deactivateBtns.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                const card = this.closest('.game-card');
                const gameId = card.getAttribute('data-id');
                if (gameId) {
                    submitStatusForm(gameId, '已下架');
                } else {
                    alert('未找到游戏ID，操作失败');
                }
            });
        });

        // 搜索功能
        const searchInput = document.querySelector('.filter-input');
        searchInput.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const gameCards = document.querySelectorAll('.game-card');

            gameCards.forEach(card => {
                const gameName = card.querySelector('.game-title').textContent.toLowerCase();
                if (gameName.includes(searchTerm)) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        });

        // 状态筛选
        const statusFilter = document.getElementById('statusFilter');
        statusFilter.addEventListener('change', function() {
            const selectedStatus = this.value;
            const gameCards = document.querySelectorAll('.game-card');

            // 遍历所有游戏卡片，根据状态筛选
            gameCards.forEach(card => {
                const statusElement = card.querySelector('.game-status');
                if (!statusElement) return;

                const cardStatus = statusElement.textContent.trim();

                // 如果选择"所有状态"或者卡片状态匹配，则显示
                if (!selectedStatus || cardStatus === selectedStatus) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });
        });
    }
</script>
</body>
</html>